<template>
  <el-drawer
    :with-header="false"
    :modal="false"
    :show-close="false"
    size="100%"
    :modal-append-to-body="false"
    :destroy-on-close="true"
    :visible.sync="flowDrawer"
    direction="rtl"
    custom-class="drawer"
  >
    <div class="cont-deploy">
      <div class="right">
        <div class="title">xxx信号处理-基本信息</div>
      </div>
      <div class="r-main">
        <el-collapse v-model="activeNames">
          <el-collapse-item name="1">
            <template slot="title">
              <el-button round type="primary" size="small"
                >流程缩略图</el-button
              >
            </template>
            <div class="minimap" ref="minimap"></div>
          </el-collapse-item>
          <el-collapse-item name="2">
            <template slot="title">
              <el-button round type="primary" size="small">基本信息</el-button>
            </template>
            <el-form :model="formData" ref="depForm" label-width="100px">
              <el-form-item label="流程组件名称：">
                <div>xxx信号处理</div>
              </el-form-item>
              <el-form-item label="组件数：">
                <div>08</div>
              </el-form-item>
              <el-form-item label="内部组件名称：">
                <div>
                  卫星网络、某解调器、数据转换引擎、BBF资源规划、信号解析、
                  BBF信号监控、BBF信号方案。
                </div>
              </el-form-item>
              <el-form-item label="创建时间：">
                <div>2021/04/25 12:56:45</div>
              </el-form-item>
              <el-form-item label="流程组件描述：">
                <div>
                  XXX信号处理流程组件描述XXX信号处理流程组件描述XXX信号处
                  理流程组件描述XXX信号处理流程组件描述XXX信号处理流程组件
                  描述XXX信号处理流程组件描述
                </div>
              </el-form-item>
            </el-form>
          </el-collapse-item>
        </el-collapse>
        <div class="r-bottom">
          <el-button type="primary">修改组件</el-button>
        </div>
      </div>
    </div>
  </el-drawer>
</template>

<script>
export default {
  props: ["flowDrawer", "graph"],
  data() {
    return {
      activeNames: ["1", "2"],
      childrenActiveNames: ["11", "12", "13"],
      formData: {},
    };
  },
  mounted() {
    // console.log(this.graph);
    this.$nextTick(() => {
      const miniMapContainerRef = this.$refs.minimap;
      this.graph.options.minimap = {
        enabled: true,
        container: miniMapContainerRef,
        width: 520,
        height: 180,
        scalable: false,
      };
      console.log(this.graph);
      //   this.graph.createGraph({
      //     minimap: {
      //       enabled: true,
      //       container: miniMapContainerRef,
      //       width: 520,
      //       height: 180,
      //       scalable: false,
      //     },
      //   });
    });
  },
  // watch: {
  //   graph: {
  //     handler(val) {
  //       if (val) {
  //         const miniMapContainerRef = this.$refs.minimap;
  //         this.$nextTick(() => {
  //           graph.createGraph({
  //             minimap: {
  //               enabled: true,
  //               container: miniMapContainerRef,
  //               width: 520,
  //               height: 180,
  //               scalable: false,
  //             },
  //           });
  //         });
  //       }
  //     },
  //     deep: true,
  //   },
  // },
};
</script>
<style lang="less" scoped>
.drawer {
  .cont-deploy {
    .title {
      background: #4d5c71;
      color: white;
      height: 35px;
      line-height: 35px;
      padding-left: 20px;
    }
    .r-main {
      // padding: 15px;
      height: calc(100%);
      overflow-y: auto;
      position: relative;
      background: #fff;
      /deep/.el-collapse-item__header {
        padding-left: 20px;
      }
      /deep/.el-collapse-item__arrow {
        margin-left: 30px;
      }
      .r-bottom {
        // position: fixed;
        text-align: center;
        margin: 10px 0;
        // bottom: 60px;
        // right: 200px;
      }
      .el-collapse-item-content {
        padding: 0px 20px;
      }
    }
  }
  .minimap{
    height: 200px;
  }
}
// /deep/.el-form-item__content {
//   line-height: 20px;
// }

.el-drawer__wrapper {
  right: 0;
  left: auto;
  width: 40%;
  position: absolute;
}
</style>